<template>
   <div class="mt-4">
    <n-grid x-gap="12" :cols="4">
      <n-gi span="2">
       <div class="flex items-center">
        <n-icon  color="rgb(255,99,40)" size="35">
          <AllOutFilled />
        </n-icon>
        <span class="text-lg font-semibold text-sky-900" >
          场景名称：{{ data.name }}
        </span>
       </div>
      </n-gi>
      <n-gi span="2">
       <div class="flex items-center">
        <n-icon  color="rgb(77,199,188)" size="35">
          <AppsRound />
        </n-icon>
        <span class="text-lg font-semibold text-sky-900" >
          回测类别：{{ data.backtest_type }}
        </span>
       </div>
      </n-gi>
      <n-gi :span="4">
       <div class="flex items-center">
        <n-icon  color="rgb(251,196,77)" size="35">
          <MiscellaneousServicesOutlined />
        </n-icon>
        <span class="text-lg font-semibold text-sky-900" >
          策略描述：{{ data.strategy_description }}
        </span>
       </div>
      </n-gi>
    </n-grid>
   </div>
</template>

<script setup>
import {AllOutFilled,AppsRound,MiscellaneousServicesOutlined} from '@vicons/material'
const props = defineProps(['data']);
const data = props.data;

</script>